<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>源辰-零食网商品详细</title>
<meta name="keywords" content="小吃,美食,零食,源辰" />
<meta name="description" content="各种小吃美食，应有尽有" />

<!-- 基础路径 给所有的路径加上向上一级目录 -->
<base href="../">

<link href="images/yc.png" rel="shortcut icon" type="image/x-icon" />
<link href="css/header.css" rel="stylesheet" type="text/css" />
<link href="css/index.css" rel="stylesheet" type="text/css" />
<link href="css/footer.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="css/detail.css" type="text/css" >
</head>

<body>
<!-- 顶部区域 -->
<header id="header">
	<!-- 顶部标题区域 -->
	<div class="htitle">
    	<a href="#" target="_blank" class="location">衡阳</a>
        
        <div class="header-info">
        	<div class="login-info" v-if="isLogin">
            	<a href="front/user.html" title="个人信息">欢迎：{{memberInfo.nickName}}</a>
                <a href="register.html" title="点击注册"> 免费注册 </a>
            </div>
        
            <div class="login-info" v-else>
            	<a href="login.html" title="点击登录">您好，请登录</a>
                <a href="register.html" title="点击注册"> 免费注册 </a>
            </div>
            
            <div class="person-info">
            	<span>|</span>
            	<a href="front/order.html" target="_blank">我的订单</a>
                <span>|</span>
                <a href="#" target="_blank">我的小吃</a>
                <span>|</span>
                <a href="#" target="_blank">客户服务</a>
                <span>|</span>
           		<a href="#" target="_blank">个人信息</a>
            </div>
        
        </div>
    </div>
    
    <!-- 顶部搜索区域 -->
    <div class="search">
    	<div class="search_left">
    		<a href="index.html" title="首页">
            	<img src="images/logo.png" width="260px" height="120px"/> 
            </a>
        </div>
        
        <div class="search_right">
        	<div class="search_top">
                <div class="search_div">
                	<!-- ref -->
                    <input type="search" class="search-ipt" placeholder="请输入要搜索的内容" ref="gname" id="search"/>
                    <input type="button" class="search-btn" @click="search"/>  
                </div>
                <div class="buycart">
                	<i class="iconfont">0</i>
                    <a href="front/cart.html" target="_blank">我的购物车</a>
                </div>
            </div>
            
            <div class="search_item" id="search_item">
            	<!-- TODO v-for循环渲染商品类型 -->
            	<a href="javascript:void(0)" class="selected" @click="findByTno(0,'')">全部</a>
            	<a href="javascript:void(0)" v-for="(type, index) in types"
            		@click="findByTno(index + 1, type.tno)" :data-tno="type.tno">{{type.tname}}</a>
            		<!-- :data-tno vue给标签绑定自定义的数据 -->
            </div>
        </div>
    </div>
</header>

<div id="app">
	<!-- 面包屑导航 --> 
	<div class="breadcrumb" id="breadcrumb">
	    <a href="javascript:void(0)">全部分类</a>
	    <span>&gt;</span>
	    <a href="javascript:void(0)" id="goods_type">{{goods.tname}}</a>
	    <span>&gt;</span>
	    <a href="javascript:void(0)">商品详情</a>
	 </div>
	     
	<!-- 商品展示 -->
	<div class="goods_details_con clearfix">
	    <div class="goods_details_pic fl" id="goods_pics">
	    	<!-- 多图进行处理 -->
	        <img v-for="pic in pics" :src="pic" ref="photo">
	    </div>
	    <div class="goods_details_list fr">
	        <h3>{{goods.gname}}</h3>
	        <p>{{goods.intro}}</p>
	        <div class="price_bar">
	            <span class="show_price">&yen;<em>{{goods.price}}</em>元</span>
	            <span class="show_unit">单位：<em>{{goods.unit}}</em></span>
	        </div>
	        <div class="goods_num clearfix">
	            <div class="num_name fl">数量：</div>
	            <div class="num_add fl">
	                <input type="text" class="num_show fl" value="1" id="goods_count" v-model="nums">
	                <a href="javascript:void(0)" class="add fr" @click="addCount(1)">+</a>
	                <a href="javascript:void(0)" class="minus fr" @click="addCount(-1)">-</a>	
	            </div>
	            <div class="balance_cls">仓库量<span id="store_num">{{goods.balance}}</span> {{goods.unit}}</div>
	        </div>
	        <div class="total">总价：<em>{{(goods.price * nums).toFixed(2)}}</em>元</div>
	        <div class="operate_btn">
	            <a href="javascript:;" class="buy_btn" id="buy_btn">立即购买</a>
	            <a href="javascript:void(0);" class="add_cart" id="add_cart" @click="addCart">加入购物车</a>				
	        </div>
	    </div>
	</div>
	
	<!-- 商品详情 -->
	<div class="main_wrap clearfix">
	    <div class="l_wrap fl clearfix">
	        <div class="new_goods">
	            <h3>新品推荐</h3>
	            <ul>
	                <li>
	                    <a href="#"><img src="images/goods/good01.jpg"></a>
	                    <h4><a href="#">零食大礼包</a></h4>
	                    <div class="prize">&yen;3.90</div>
	                </li>
	                <li>
	                    <a href="#"><img src="images/goods/good02.jpg"></a>
	                    <h4><a href="#">多味泡泡糖</a></h4>
	                    <div class="prize">&yen;16.80</div>
	                </li>
	            </ul>
	        </div>
	    </div>
	
	    <div class="r_wrap fr clearfix">
	        <ul class="detail_tab clearfix">
	            <li class="active">商品介绍</li>
	            <li>评论</li>
	            <li>推荐</li>
	        </ul>
	
	        <div class="tab_content">
	            <dl>
	                <dt>商品详情：</dt>
	                <!-- 详情数据带有v-html | {{goods.descr}} -->
	                <dd v-html="goods.descr"></dd>
	            </dl>
	        </div>
	
	    </div>
	</div>
</div>

<div class="popup_con">
	<div class="popup">
		<p id="popup_info"></p>
	</div>
</div>    
<!-- 版权所有 -->
<footer>
	<div class="foot_link">
        <a href="#">关于我们</a> <span> | </span>
        <a href="#">联系我们</a> <span> | </span>
        <a href="#">招聘广告</a> <span> | </span>
        <a href="#">友情链接</a>
    </div>
    <p>CopyRight &copy; 2019 <a class="copy" href="http://www.hyycinfo.com" target="_blank">衡阳市源辰信息科技有限公司</a> All Rights Reserverd</p>
    <p>电话：0734-8355998 湘ICP备16015987号-1</p>
</footer>

<!-- 依次引入相关js -->
<script type="text/javascript" src="js/vue/vue.js"></script>
<script type="text/javascript" src="js/vue/axios.js"></script>
<script type="text/javascript" src="js/vue/qs.js"></script>
<script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>

<!-- 引入公共js文件 登录检测 显示用户 购物信息 类型渲染 -->
<script type="text/javascript" src="js/base.js"></script>

<script>
	// console.log(location.href);   // http:localhost:8080/yc_snacknet_vue/front/detail.html?6
	let gno='';   // 查询的商品编号  6
	const vm = new Vue({
		el: '#app',
		data: {
			goods: {},  // 商品详情
			nums: 1,  //   商品数量
			pics: [],  // 图片轮播
		},
		mounted(){
			/*// 获取url获取gno
			gno = location.search;  // 查询部分 ? 后面的数据   ?1&2 -> ?1
			if (gno == ""){   // 说明没有携带商品编号  则  跳转到主界面 重新选购商品
				location.href='http://localhost:8080/yc_snacknet_vue/front/index.html';
				// location.href = '/index.html';
				return;
			}
			gno = gno.replace("?", "");  // 替换 1 获取商品编号
			// console.log(gno);          qs.stringify({gno}))  传参数使用
			axios.post("goods/findByGno", qs.stringify({gno})).then(res =>{
					if (res.status == 200 && res.data.code == 200){  // 请求和响应成功
						this.goods = res.data.data;
						// ../pics/1589957975356_1012.jpg;../pics/1589957975356_1000.jpg
						this.pics = res.data.data.pics.split(";");  // 自定义大的文件上传时定义的多图格式 将图片路径切割成数组
						this.$nextTick(()=>{  // 当vue第一次渲染完成  执行的方法 实现图片轮播效果
							showPics();
						})
						return;
					}
			})*/
			
			axios.all([findByGno()]).then(axios.spread((res=>{
				if (res.status == 200 && res.data.code == 200){
					this.goods = res.data.data;
					console.log(this.goods);
					this.pics = res.data.data.pics.split(";");  // 自定义大的文件上传时定义的多图格式  将图片路径切割成数组
					this.$nextTick(() => {  // 当Vue第一次渲染完成 执行的方法 实现图片轮播效果
						showPics();
					})
					return;
				}
			})))
		},
		methods: {
			addCount(num){  // 商品改变 -1 | 1
				if (num == -1 && this.nums == 1){   // 说明不能再减少
					return;
				}
				if (num == 1 && this.nums >= this.goods.balance){  // 说明不能再增加了 超过库存
					return;
				}
				this.nums = parseInt(this.nums) + num;
			},
			addCart(){  // 加入购物车
				// TODO 必须先登录检测验证 判断用户的登录状态
				if (!login.$data.isLogin){
					showMsg("请先登录...", "red", function(){location.href="login.html"});
					return;
				}
				// 此时会有两种情况 需要判断当前用户的购物车中是否存在该商品
				// a 说明购物车中有  累加
				if (login.$data.cartCount > 0){  // 购物车不为空
					let lcarts = login.$data.carts;
					for (let cart of lcarts){
						// 当前购物车的商品编号 和 购买的商品编号一致的情况下 说明是同一种商品 更新操作
						if (cart.gno == this.goods.gno){
							axios.post("cart/update", qs.stringify({num : this.nums, cno : cart.cno})).then(res => {
								if (res.status == 200 && res.data.code == 200){
									showMsg("加入购物车成功...", "green");
								}else{
									showMsg("加入购物车失败...", "red");
								}
							})
							return false;
						}
					}
					
				}
				// b  说明购物车中没有   新增
				axios.post("cart/add", qs.stringify({gno : this.goods.gno, num : this.nums, mno: login.$data.loginID})).then(res => {
					if (res.status == 200 && res.data.code == 200){
						showMsg("加入购物车成功...", "green");
						// 将当前商品同步到购物车列表中
						login.$data.cartCount += 1;
						let net_cart = {};
						new_cart.cno = res.data.data;  // 购物车编号
						new_cart.gno = this.goods.gno;  // 商品编号
						login.$data.carts.push(new_cart);  // 同步信息
						return;
					}
					showMsg("加入购物车失败...", "red");
				})
			}
			
			
		}
	})
	
	
	// 当vue第一次渲染完成 执行的方法 实现图片轮播效果
	function showPics(){
		let imgLen = vm.$refs.photo.length;
		if (imgLen <= 1){  // 说明是单图商品
			return;
		}
		// 轮播图片
		let i = 0;
		setInterval(() => {
			/* for (let p in vm.$refs.photo){
				p.display = "none";   // 隐藏图片 block
			}*/
			$("#goods_pics>img").css("display", "none");
			
			vm.$refs.photo[i].style.display = 'block'; // 显示图片
			i = (i + 1) % imgLen;
		}, '2000');
	}
	
	
	// 通过商品编号查询商品详情
	function findByGno(){
		// 获取url获取gno
		gno = location.search;   // 查询部分?后面的数据 ?1&2 -> ?1
		if (gno == ""){
			location.href = 'http://localhost:8080/yc_snacknet_vue/front/index.html';
			return;
		}
		gno = gno.replace("?", "");   // 替换1 获取商品编号
		// console.log(gno);
		return axios.post("goods/findByGno", qs.stringify({gno}));
	}
</script>
</body>
</html>
